<template>
	<view>

		<map id='map' :markers="covers" :include-points="covers" :latitude="latitude" :longitude="longitude"
			style="width: 100%; height: 100vh;" :scale="17">
		</map>


		<view class="bottom-layout" :style="{'transform':showpop?'translate(0, 0)':'translate(0, 350rpx)'}">

			<view class="bottom_top">
				<view style="display: flex;align-items: center;">
					<text style="font-size: 28rpx;color: #333;">{{detailBean.carInfo.carNo|filterNull}}</text>
					<text
						style="font-size: 28rpx;color: #1573FF;margin-left: 10rpx;">{{detailBean.deviceInfo.deviceStatusStr|filterNull}}</text>

				</view>
				<view style="display: flex;align-items: center;">
					<text style="font-size: 24rpx;color: #333;">速度:{{detailBean.deviceInfo.speed|filterNull}}km/h</text>
					<text
						style="font-size: 24rpx;color: #333;;margin-left: 30rpx;">方向:{{detailBean.deviceInfo.direct|filterNull}}</text>

				</view>
				<view style="display: flex;align-items: center;">
					<text
						style="font-size: 24rpx;color: #333;">位置:{{detailBean.deviceInfo.addrDetail|filterNull}}</text>

				</view>

			</view>

			<view
				style="display: flex;height: 40rpx;margin: 10rpx 0;justify-content: space-evenly;align-items: center;">
				<text style="font-size: 28rpx;color: #1573FF;" @click="goTrack">轨迹回放</text>
				<view style="width: 2rpx;height: 30rpx;background-color: #1573FF;">
				</view>
				<text style="font-size: 28rpx;color: #1573FF;" @click="goRequest">发送指令</text>
			</view>

			<view style="display: flex;align-items: center;justify-content: center;height: 40rpx;"
				@click="showpop=!showpop">
				<u-icon :name="showpop?'arrow-up':'arrow-down'"></u-icon>
			</view>

			<view class="bottom-content">

				<view
					style="display: flex;height: 40rpx;margin: 10rpx 0;justify-content: space-evenly;align-items: center;">

					<view style="display: flex;flex-direction: column;align-items: center;" @click="indicatorIndex=0">
						<text style="font-size: 26rpx;color: #333;font-weight: bold;">车辆信息</text>
						<view class="indicator" :style="{'opacity':0==indicatorIndex?'1':'0'}">
						</view>
					</view>

					<view style="display: flex;flex-direction: column;align-items: center;" @click="indicatorIndex=1">
						<text style="font-size: 26rpx;color: #333;font-weight: bold;">设备信息</text>
						<view class="indicator" :style="{'opacity':1==indicatorIndex?'1':'0'}">
						</view>
					</view>

				</view>
				
				<view style="display: flex;flex-direction: column;margin-top: 10rpx;" v-if="0==indicatorIndex">
					<view class="text-line">
						<text class="text-name">车牌号:</text>
						<text class="text-value">{{detailBean.carInfo.carNo|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">车架号:</text>
						<text class="text-value">{{detailBean.carInfo.vinNo|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">品牌/车型/车系:</text>
						<text class="text-value">{{detailBean.carInfo.brandName|filterNull}}/{{detailBean.carInfo.modelName|filterNull}}/{{detailBean.carInfo.seriesName|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">车辆状态:</text>
						<text class="text-value">{{detailBean.carInfo.carStatusStr|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">行驶里程数:</text>
						<text class="text-value">{{detailBean.carInfo.sumOdograph|filterNull}}km</text>
					</view>
				</view>
				
				<view style="display: flex;flex-direction: column;margin-top: 10rpx;" v-if="1==indicatorIndex">
					<view class="text-line">
						<text class="text-name">设备编号:</text>
						<text class="text-value">{{detailBean.deviceInfo.deviceNo|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">状态:</text>
						<text class="text-value">{{detailBean.deviceInfo.deviceStatusStr|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">最近定位系统时间:</text>
						<text class="text-value">{{detailBean.deviceInfo.timeReported|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">最近定位位置:</text>
						<text class="text-value">{{detailBean.deviceInfo.addrDetail|filterNull}}</text>
					</view>
				</view>


			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				covers: [],
				latitude: '',
				longitude: '',
				carId: '',
				deviceId: '',
				deviceManufacturerNumber: '',
				deviceNo: '',
				detailBean: {
					carInfo: {

					},
					deviceInfo: {

					},
					orderInfo: {

					}
				},
				showpop: false,
				indicatorIndex:0
			}
		},
		methods: {
			getData() {
				this.$u.api.vehiclemonitorInfo({
					carId: this.carId,
					deviceId: this.deviceId,
					deviceManufacturerNumber: this.deviceManufacturerNumber,
					deviceNo: this.deviceNo
				}).then(res => {
					this.detailBean = res

				}).catch(e => {
					// this.detailBean = {
					// 	carInfo: {
					// 		carId: '56781212',
					// 		carNo: '陕A12312',
					// 		vinNo: 'RJUJYJ897893',
					// 		brandName: '宝马',
					// 		seriesName: 'X5',
					// 		modelName: '悦动版',
					// 		carStatusStr: '运行中',
					// 		sumOdograph: '160',

					// 	},
					// 	deviceInfo: {
					// 		deviceId: 'dtryuetyu12356',
					// 		deviceNo: 'rtyirtyu789',
					// 		deviceManufacturerNumber: '789659652323',
					// 		deviceStatusStr: '离线了',
					// 		timeReported: '2022-11-28 08:11:59',
					// 		longitude: 108.911540,
					// 		latitude: 34.251028,
					// 		speed: '100',
					// 		direct: '东北',
					// 		addrDetail: '锐推肉体与让他回国后南方姑娘分工和南宫南方姑',
					// 	},
					// 	orderInfo: {
					// 		customerName: '名造成',
					// 		rentTypeStr: '租赁中',
					// 		customerTel: '18888888888',
					// 		timeStartRent: '2022-11-12 08:12:30',
					// 		timeFinishRent: '2022-12-13 08:11:59',
					// 	}
					// }
				})
			},
			
			goTrack(){
				getApp().globalData.intentMonitorData = this.detailBean
				
				uni.navigateTo({
					url:'/pagesC/trackPlay/trackPlayback'
				})
			},
			
			goRequest(){
				getApp().globalData.intentMonitorData = this.detailBean
				
				uni.navigateTo({
					url:'/pagesC/requestCar/requestCar'
				})
			},
			
		},

		onShow() {
			this.getData()
		},

		onLoad(op) {
			console.log(op);

			this.latitude = !uni.$u.test.isEmpty(op.latitude) ? op.latitude : ''
			this.longitude = !uni.$u.test.isEmpty(op.longitude) ? op.longitude : ''
			this.carId = !uni.$u.test.isEmpty(op.carId) ? op.carId : ''
			this.deviceId = !uni.$u.test.isEmpty(op.deviceId) ? op.deviceId : ''
			this.deviceManufacturerNumber = !uni.$u.test.isEmpty(op.deviceManufacturerNumber) ? op
				.deviceManufacturerNumber : ''
			this.deviceNo = !uni.$u.test.isEmpty(op.deviceNo) ? op.deviceNo : ''

			this.covers = [{
				id: 0,
				width: 26,
				height: 15,
				latitude: op.latitude,
				longitude: op.longitude,
				iconPath: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
				callout: {
					content: op.carPlateNo,
					bgColor: 1 == op.gpsDeviceStatus ? '#1573FF' : 2 == op.gpsDeviceStatus ? '#333333' : 3 == op
						.gpsDeviceStatus ? '#999999' : 4 == op.gpsDeviceStatus ? '#E12B53' : '#333333',
					color: '#ffffff',
					padding: '10rpx 5rpx',
					borderRadius: 3,
					textAlign: 'center',
					display: 'ALWAYS'
				}
			}]



		}
	}
</script>

<style lang="scss" scoped>
	.bottom-layout {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 10rpx;
		right: 10rpx;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		transition: all 300ms ease-in-out;
	}

	.bottom_top {
		padding: 20rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bottom-content {
		height: 350rpx;
		display: flex;
		flex-direction: column;
	}

	.indicator {
		width: 45rpx;
		height: 9rpx;
		background: linear-gradient(to right, #B0CFFF, #1573FF);
		margin-top: 7rpx;
		border-radius: 90rpx;
	}
</style>
